<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族 18-魅族商城</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/details.css">
</head>
<body>
    <div id="app">
        <div id="header">
            <div class="h_con public">
                <div class="logo">
                    <h1>
                        <a href="index.html">meizu</a>
                    </h1>
                </div>
                <ul class="h_con_ul1">
                    <li><a href="typesPhones.html">手机</a></li>
                    <li><a href="typesLipro.html">Lipro</a></li>
                    <li><a href="typesSound.html">声学</a></li>
                    <li><a href="typesFittings.html">配件</a></li>
                    <li><a href="typesLife.html">生活</a></li>
                    <li><a href="#">Flyme</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">专卖店</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">企业服务</a></li>
                    <li><a href="#">APP下载</a></li>
                </ul>
                <ul class="h_con_ul2">
                    <li>
                        <form class="clearfix">
                            <input type="text" placeholder="魅族 18">
                            <span></span>
                        </form>
                    </li>
                    <li>
                        <a href="javascript:;"></a>
                    </li>
                    <li>
                        <a href="javascript:;"><span>0</span></a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="fastNav">
            <div class="fa_con public">
                <div class="fa_con_left">
                    <h2 class="mz-title"></h2>
                    <p><a href="details.html?phone&1">魅族 18 pro</a></p>
                    <p><a href="details.html?phone&2">【老用户】 魅族 18</a></p>
                    <p><a href="details.html?phone&1">【老用户】 18 pro</a></p>
                    <p><a href="details.html?phone&3">魅族 17</a></p>
                    <p><a href="details.html?phone&4">魅族 17 pro</a></p>
                </div>
                <div class="fa_con_right">
                    <ul>
                        <li><a href="javascript:;">概述</a></li>
                        <li><a href="javascript:;">参数</a></li>
                        <li><a href="javascript:;">换机指引</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="section">
            <div class="se_con public clearfix">
                <div class="se_con_left">
                    <!-- 容器 -->
                    <div class="left_container">
                        <!-- 轮播图 -->
                        <div class="wrap clearfix">
                            <div class="carImages">
                                <div class="swiper-slide">
                                    <div class="btn-left"></div>
                                    <img src="" alt="" class="mz-pic1">
                                    <div class="btn-right"></div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="btn-left"></div>
                                    <img src="" alt="" class="mz-pic2">
                                    <div class="btn-right"></div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="btn-left"></div>
                                    <img src="" alt="" class="mz-pic3">
                                    <div class="btn-right"></div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="btn-left"></div>
                                    <img src="" alt="" class="mz-pic4">
                                    <div class="btn-right"></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 下边显示播放视频和显示第几张图片的小点的容器 -->
                        <div class="box">
                            <!-- 播放视频按钮 -->
                            <span></span>
                            <!-- 放小点的容器 -->
                            <div class="dian">
                                <span class="sp_dian bgcolor"></span>
                                <span class="sp_dian"></span>
                                <span class="sp_dian"></span>
                                <span class="sp_dian"></span>
                            </div>
                        </div>
                    </div>
                    <!-- 收藏，对比，在线客服容器 -->
                    <div class="preview">
                        <a href="javascript:;"><span class="iconfont icon-shoucang"></span>收藏</a>
                        <a href="javascript:;"><span  class="iconfont icon-ico-"></span>对比</a>
                        <a href="javascript:;"><span class="iconfont icon-kefuxiaoxixinxi"></span>在线客服</a>
                    </div>
                </div>
                <div class="se_con_right">
                    <div class="right_hd">
                        <h1 class="mz-title"></h1>
                        <p>
                            <font color="#E03D3D"></font>
                            <span class="mz-subtitle"></span>
                        </p>
                    </div>
                    <div class="right_sell">
                        <div class="t clearfix">
                            <p class="p1">
                                ￥<span class="mz-price"></span>
                            </p>
                            <p class="p2">
                                或低至<i>￥</i><span class="mz-fenqi"></span> x 12期
                            </p>
                        </div>
                        <div class="b">
                            <dl class="dl2">
                                <dt><span>优惠券</span></dt>
                                <dd>
                                    <p>
                                        <span>满3999减400</span>
                                    </p>
                                    <a href="javascript:;">立即领取</a>
                                </dd>
                            </dl>
                            <dl class="dl3">
                                <dt><span>加价购</span></dt>
                                <dd>
                                   <span>另加<em id="jiagou">29</em>元起，即可换购超值商品</span>
                                    <a href="javascript:;">立即加购</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div class="right_service">
                        <div class="service">
                            <!-- 配送 -->
                            <dl class="peisong">
                                <dt>配送到</dt>
                                <dd>
                                    <div id="selector">
                                        <div class="text">
                                            广东省&nbsp;&nbsp;&nbsp;&nbsp;广州市&nbsp;&nbsp;&nbsp;&nbsp;<i></i>    
                                        </div>
                                    </div>
                                </dd>
                            </dl>   
                            <!-- 版本 颜色 套餐-->
                            <div class="set">
                                <!-- 版本 -->
                                <dl class="banben">
                                    <dt>版本</dt>
                                    <dd>
                                        <!-- <a href="javascript:;" class="border-Color"><span>全网通公开版 8+128GB</span></a>
                                        <a href="javascript:;"><span>全网通公开版 8+256GB</span></a>
                                        <a href="javascript:;"><span>全网通公开版 12+256GB</span></a> -->
                                    </dd>
                                </dl>
                                <!-- 颜色 -->
                                <dl class="color">
                                    <dt>颜色</dt>
                                    <dd>
                                        <!-- <a href="javascript:;" class="style">
                                            <img src="./images/details/ashImage.png" alt="">
                                            <span>松深入墨</span>
                                        </a>
                                        <a href="javascript:;" class="style other">
                                            <img src="./images/details/blackImage.png" alt="">
                                            <span>十七度灰</span>
                                        </a>
                                        <a href="javascript:;" class="style other">
                                            <img src="./images/details/blackImage.png" alt="">
                                            <span>AG梦幻独角兽</span>
                                        </a>
                                        <a href="javascript:;" class="style other">
                                            <img src="./images/details/blackImage.png" alt="">
                                            <span>AG星际灰</span>
                                        </a>
                                        <a href="javascript:;">
                                            <img src="./images/details/blackImage.png" alt="">
                                            <span>AG原野绿</span>
                                        </a> -->
                                    </dd>
                                </dl>
                                <!-- 套餐 -->
                                <dl class="taocan">
                                    <dt>套餐</dt>
                                    <dd>
                                        <div class="box">
                                            <a href="javascript:;">官方标配</a>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                            <!-- 花呗分期 -->
                            <div class="huabei">
                                <h2>
                                    花呗分期
                                    <a href="javascript:;"><i class="wenhao iconfont icon-wenhao"></i></a>
                                </h2>
                                <div class="huabei_bd">
                                    <a href="javascript:;">
                                        <span><em>￥</em> <i class="mz-fq3"></i> × 3 期</span>
                                        <span>含手续费<em>￥</em>28.36 / 期</span>
                                    </a>
                                    <a href="javascript:;">
                                        <span><em>￥</em> <i class="mz-fq6"></i> × 6 期</span>
                                        <span>含手续费<em>￥</em>28.36 / 期</span>
                                    </a>
                                    <a href="javascript:;">
                                        <span><em>￥</em> <i class="mz-fenqi"></i> × 12 期</span>
                                        <span>含手续费<em>￥</em>28.36 / 期</span>
                                    </a>
                                </div>
                            </div>
                            <!-- 选择数量 -->
                            <div class="control">
                                <h2>选择数量</h2>
                                <div class="box">
                                    <a href="javascript:;" class="minus">-</a>
                                    <input type="text" value="1" id="number">
                                    <a href="javascript:;" class="add">+</a>
                                </div>
                            </div>
                            <!-- 加入购物车 -->
                            <div class="purchase">
                                <dl>
                                    <dt>总计</dt>
                                    <dd>
                                        <div class="jiage">
                                            <strong id="jiage">
                                                <i>￥</i><span class="mz-price mz-total"></span>
                                            </strong>
                                        </div>
                                        <div class="list">
                                            <span id="text">已选：<i class="mz-title"></i>、<i class="mz-spec"></i>、<i class="mz-color"></i>、官方标配、全款、1件</span>
                                        </div>
                                    </dd>
                                </dl>
                                <div class="action">
                                    <a href="javascript:;" class="mai">立即购买</a>
                                    <a href="" class="car">加入购物车</a>
                                </div>
                                <div class="footer">
                                    <span class="show">
                                        <span><img src="./images/details/gou.png" alt="">花呗分期</span>
                                        <b>花呗分期是由蚂蚁花呗联合魅族商城共同推出的“先购物后付款”的支付体验，支持预支蚂蚁花呗额度，免息期最长可达41天，可选择分3、6、12期还款。</b>
                                    </span>
                                    <span class="show">
                                        <span><img src="./images/details/gou.png" alt="">顺丰发货</span>
                                        <b>该商品顺丰发货，顺丰无法到达的地区会安排转寄其他快递。</b>
                                    </span>
                                    <span class="show">
                                        <a href="javascript:;"><span><img src="./images/details/gou.png" alt="">以旧换新</span></a>
                                        <b></b>
                                    </span>
                                    <span class="show">
                                        <span><img src="./images/details/gou.png" alt="">7天无理由退货</span>
                                        <b>自您的订单签收7个自然日之内（含），在商品完好（手机产品未激活）的情况下，可进行无理由退货。</b>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 下面是图片 -->
            <div class="simple">
                <div class="container public">
                    <img src="images/details/meizu18-1.jpg" alt="">
                    <img src="images/details/meizu18-2.jpg" alt="">
                    <img src="images/details/meizu18-3.jpg" alt="">
                    <img src="images/details/meizu18-4.jpg" alt="">
                    <img src="images/details/meizu18-5.jpg" alt="">
                    <img src="images/details/meizu18-6.jpg" alt="">
                    <img src="images/details/meizu18-7.jpg" alt="">
                    <img src="images/details/meizu18-8.jpg" alt="">
                    <img src="images/details/meizu18-9.jpg" alt="">
                    <img src="images/details/meizu18-10.jpg" alt="">
                    <img src="images/details/meizu18-11.jpg" alt="">
                    <img src="images/details/meizu18-12.jpg" alt="">
                    <img src="images/details/meizu18-13.jpg" alt="">
                    <img src="images/details/meizu18-14.jpg" alt="">
                    <img src="images/details/meizu18-15.jpg" alt="">
                    <img src="images/details/meizu18-16.jpg" alt="">
                    <img src="images/details/meizu18-17.jpg" alt="">
                    <img src="images/details/meizu18-18.jpg" alt="">
                    <a href="javascript:;"><img src="images/details/meizu18-19.jpg" alt=""></a>
                </div>
            </div>
            <div class="se_footer">
                <div class="container public">
                    <h2>为您推荐</h2>
                    <div class="c">
                        <ul>
                            <li>
                                <a href="#">
                                    <div class="img">
                                        <img src="https:////openfile.meizu.com/group1/M00/07/C5/Cgbj0F6zwUCAZXioAAqyPRV4XK4045.png" alt="">
                                    </div>
                                    <div class="text">
                                        <h4>魅族 17 Pro</h4>
                                        <h6>【限时领券立省500】高通骁龙 865 + UFS 3.1 + LPDDR5 | 6400W 全场景 AR 专业影像系统 | 煅烧陶瓷机身 | 120 Hz 尝鲜模式</h6>
                                        <p><span class="sp1">￥</span><span class="sp2">4299</span><span class="sp3">起</span></p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img">
                                        <img src="https://openfile.meizu.com/group1/M00/08/40/Cgbj0V-JCMSAa5qBAAMth2Y6_gU978.png" alt="">
                                    </div>
                                    <div class="text">
                                        <h4>魅族 POP2s 真无线耳机</h4>
                                        <h6>【限时3期免息】好声音标杆 |  Flyme 妙连｜双主机同步传输｜蓝牙 5.0 芯片｜超低延时｜黄金分割设计</h6>
                                        <p><span class="sp1">￥</span><span class="sp2">299</span></p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img">
                                        <img src="https://openfile.meizu.com/group1/M00/07/D4/Cgbj0F64-fCANzfvAAMAQSi_H7U780.png" alt="">
                                    </div>
                                    <div class="text">
                                        <h4>魅族超充 USB-C 移动电源</h4>
                                        <h6>【限时特惠价139元】USB-C 双向快充 | 22.5W 大功率 | 数字电量显示 | 多快充协议支持</h6>
                                        <p><span class="xianshi">限时特惠</span><span class="sp1">￥</span><span class="sp2">139</span><span class="sp3">起</span></p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img">
                                        <img src="https://openfile.meizu.com/group1/M00/07/D5/Cgbj0V6o2n-ACbZsAAGnmeZVVRs678.png" alt="">
                                    </div>
                                    <div class="text">
                                        <h4>魅族 Type-C 数据线</h4>
                                        <h6>5A 大电流 | Type-C 接口 | 更快更方便</h6>
                                        <p><span class="sp1">￥</span><span class="sp2">49</span></p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="img">
                                        <img src="https://openfile.meizu.com/group1/M00/07/63/Cgbj0V1l2ieAYKJGAAHMHuLWRMo374.png" alt="">
                                    </div>
                                    <div class="text">
                                        <h4>魅族 EP3C 耳机</h4>
                                        <h6>【限时特惠99元】Hi-Res 认证高解析音质 | Type-C数字接口 | 高保真生物纤维振膜</h6>
                                        <p><span class="xianshi">限时特惠</span><span class="sp1">￥</span><span class="sp2">99</span><span class="sp3">起</span></p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="container public">
                <div class="top clearfix">
                    <ul>
                        <li><a href="#"><img src="./images/details/shunfeng.png" alt=""><span>满80免运费</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/d28eac8b-b915-49dc-9dbd-80884a07d44f.png" alt=""><span>100+ 城市次日送达</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/b21f3e65-f7f4-4693-914c-c070faf96770.png" alt=""><span>7天无理由退货</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/1998f0da-a439-4e07-9736-e6a1c39fb0ae.png" alt=""><span>15天换货保障</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/420825c1-4763-436d-b3e1-721651ccc70c.png" alt=""><span>1年免费保修</span></a></li>
                        <li><a href="#"><img src="https://fms.res.meizu.com/dms/2018/07/13/1c5cfeff-1b35-499e-bc2a-1fd29305be69.png" alt=""><span>上门快修</span></a></li>
                    </ul>
                    <div class="r">
                        <span>周一至周日 8:00-20:00</span>
                        <p>400-788-3333</p>
                        <a href="#">在线客服</a>
                    </div>
                </div>
                <hr>
                <div class="bottom">
                    <div class="le">
                        <ul class="clearfix">
                            <li><a href="#">了解魅族</a></li>
                            <li><a href="#">加入我们</a></li>
                            <li><a href="#">联系我们</a></li>
                            <li><a href="#">Flyme</a></li>
                            <li><a href="#">魅族社区</a></li>
                            <li><a href="#">天猫旗舰店</a></li>
                            <li><a href="#">问题反馈</a></li>
                            <li><a href="#">线上销售授权名单公示</a></li>
                            <li><a href="#">出版物经营许可证</a></li>
                            <li>
                                <a href="#"><i class="guoqi"></i>简体中文</a>
                                <div class="box">
                                    <ul>
                                        <li><a href="#"><i class="i1"></i><span>简体中文</span></a></li>
                                        <li><a href="#"><i class="i2"></i><span>繁體中文</span></a></li>
                                        <li><a href="#"><i class="i3"></i><span>English</span></a></li>
                                        <li><a href="#"><i class="i4"></i><span>Русский</span></a></li>
                                        <li><a href="#"><i class="i5"></i><span>Türkiye</span></a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                        <div class="te">
                            ©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="#">粤ICP备13003602号</a>
                            <a href="#">合字B2-20170010 </a>
                            <a href="#">营业执照</a>
                            <a href="#">法律声明</a>
                            <a href="#">粤公网安备 44049102496009 号</a>
                            <a href="#"><i class="te_i1"></i></a>
                            <a href="#"><i class="te_i2"></i></a>
                            <a href="#"><i class="te_i3"></i></a>
                        </div>
                    </div>
                    <div class="r">
                        <a href="#">
                            <img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" alt="">
                            <i></i>
                        </a>
                        <span></span>
                        <a href="#">
                            <img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" alt="">
                            <i></i>
                        </a>
                        <span></span>
                        <a href="#">
                            <img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" alt="">
                            <i></i>
                        </a>
                        <span></span>
                        <a href="#">
                            <img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" alt="">
                            <i></i>
                        </a>
                     
                    </div>
                </div>
            </div>
        </div>
        <div id="site">
            <a href="javascript:;" class="fankui"></a>
            <a href="#fastNav" class="top"></a>
        </div>
    </div>

    <script src="./js/details.js"></script>
</body>
</html>